<template>
    <div>
        <div>过渡效果</div>
        <div>----------------------------------------------------------</div>
        
        <div id='demo'>
            <!--  点击按钮 切换显示隐藏 show= false/true  -->
            <button @click="show=!show">
                Toggle
            </button>

            <!--  transition fade自定义动画名写进name-->
            <transition name="fades">
                <p v-if="show">hello</p>
            </transition>
        
            
        </div>


    </div>
</template>
<script>
export default {
    data(){
        return{
            show:true
        }
    }
}
</script>

<style>
    /* 显示：-enter -enter-active -enter-to */
    /* 影藏：-leaver -leave-active -leave-to */
    /* .fades-leave{
        opacity:1
    } */
    .fades-enter-active, .fades-leave-active{
        transition: opacity .5s
    }
    .fades-enter, .fades-leave-to{
        opacity: 0
    }
    /* .fades-enter-to{
        opacity: 1;
    } */

</style>






